<template>
    <div>
        <form :model="user">
            <div class='A'>
                <div class='title'>登录</div>
                <div class="form">
                    <div>用户名</div><input v-model="user.name" type="text">
                </div>
                <div class="form">
                    <div>密码</div><input v-model="user.password" type="text">
                </div>
                <div class='form'>
                    <button @click="login">登录</button>
                    <button @click="register">注册</button>
                </div>
            </div>
        </form>
    </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component';
import { UserApi } from "@/api/user";
import router from '@/router';

export default class Login extends Vue {

    user={
        name:"",
        password:""
    }
    login(){
        if(this.user.name==""||this.user.password==""){
            alert("用户名或密码不准空")
        }
        else{
            UserApi.login(this.user).then((res)=>{
                console.log(res)
                router.push({
                    name:"user"
                })
            })
        }
    }
    register() {
        router.push({
                name:"register"
        })
    }
}
</script>

<style lang="less" scoped>
.A{
    .title{
        margin-bottom: 10px;
        margin-top: 10px;
        text-align: center;
    }
    margin:auto;
    margin-top: 100px;
    border:2px solid #ccc;
    border-radius:10px;
    height:220px;
    width:440px;
    background-color:#fff;
    .form{
        margin: 10px;
        text-align: center;
        div{
            text-align: right;
            width:100px;
            float: left;
        }
        button{
            margin: 10px;
        }
    }
}


    
</style>